import React, { Component } from 'react'
import Header from './components/Header'
import Footer from './components/Footer'
import List from './components/List'
import './App.css'

export default class App extends Component {
  //初始化状态
  state = {todos:[
    {id:'01',name:'吃饭',done:true},
    {id:'02',name:'睡觉',done:false},
    {id:'03',name:'敲代码',done:false},
    {id:'04',name:'跳广场舞',done:true}
  ]}

  //addTodo添加一个待办事件，接收一个todo对象
  addTodo = (todoObj) =>{
    // console.log('app',{todoObj});
    //获取原todos
    const {todos} = this.state;
    //追加一个todo
    const newTodos = [todoObj,...todos]
    //更新状态
    this.setState({todos: newTodos})
  }

  //更新一个todo对象
  updateTodo = (id,done)=>{
    //拿数据
    const {todos} = this.state
    //匹配处理数据
    const newTodos = todos.map((todoObj)=>{
      if(todoObj.id === id) return {...todoObj,done}
      else return todoObj
    })
    //更新状态
    this.setState({todos: newTodos})
  }

  //删除一个todo
  deleteTodo = (id)=>{
    //拿原来的数据
    const {todos} = this.state;
    //删除指定的todo
    const newTodos = todos.filter((todoObj)=>{
      return todoObj.id !== id;
    })
    //更新状态
    this.setState({todos: newTodos});
  }

  //全选
  checkAllTodo = (done)=>{
    //获取数据
    const{todos} = this.state;
    //加工
    const newTodos = todos.map((todoObj)=>{
      return {...todoObj,done:done}
    })
    this.setState({todos:newTodos})
  }

  //清除所有完成待办
  clearAllDone = ()=>{
    const {todos} = this.state;
    //过滤数据
    const newTodos = todos.filter((todoObj)=>{
      return !todoObj.done
    })
    this.setState({todos:newTodos})
  }

  render() {
    const {todos} = this.state;
    return (
      <div className="todo-container">
          <div className="todo-wrap">
              <Header addTodo={this.addTodo}/>
              <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
              <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
          </div>
      </div>
    )
  }
}
